<template>
    <div>
        <el-form :inline="true" label-width="80px" @submit.native.prevent ref="from">
            <el-form-item label="姓名">
                <el-input @keydown.native.enter="search" v-model="name" placeholder="请输入演员姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- content-position="left" 在右边显示txt -->
        <el-divider content-position="left">数据列表</el-divider>
        <persion @deletePersion='del(item.id)' class="actor"  v-for="item in actorData" :key="item.index" :name="item.actor_name" :avatar="item.actor_avatar"></persion>
   </div>
</template>

<script>
import Persion from '@/components/Persion.vue'
import httpApi from "@/http/index"
    export default {
        data() {
            return {
                actorData: '',
                name:''
            }
        },
        components: { Persion },
        mounted () {
            this.actorList()
        },
        methods: {
            // 捕获到子组件person 自定义方法触发
            del(id){
                    this.$confirm('是否将此信息永久删除，是否继续？','提示',{
                    type:"warning"
                }).then(()=>{
                    // let ulr = 'http://localhost:3010/movie-actor/del'    
                    httpApi.actorApi.delete({id}).then((res)=>{
                    console.log(res);
                    console.log(id);
                    if(res.data.code == 200){
                        this.$message({message:'删除成功',type:'success'})
                        this.search()
                    }else{
                        this.$message({message:'删除失败',type:'error'})
                    }
                     })
                    // this.$message({type:'success',message:'删除成功'}) 
                })
                .catch(()=>{
                    this.$message({type:'info',message:'取消删除'})
                })

                
            },
            // 加载演员列表
            actorList(){
                // let url ='http://localhost:3010/movie-actors';
                // let params = {page:1,pagesize:100};
                // myaxios.get(url,params).then((res)=>{
                //     console.log('加载演员列表数据',res);
                //     this.actorData = res.data.data
                // })
                    httpApi.actorApi.queryAllActors().then((res)=>{
                        this.actorData = res.data.data
                    });
            },
            search(){
                let name = this.name
                if(name.trim()){
                    this.listActorsByName()
                }else{
                    this.actorList()
                }
            },
            // 模糊查询演员列表
            listActorsByName(){
                // let url = 'http://localhost:3010/movie-actors/name'
                let params = {name:this.name.trim()}
                // myaxios.post(url,params).then((res)=>{
                //     console.log(res)
                //     this.actorData = res.data.data
                // })

                httpApi.actorApi.queryActorsByName(params).then(res=>{
                    console.log(res);
                    this.actorData = res.data.data
                })
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>
